import React, { Component } from 'react'
import '../../assets/css/order.css'
import {ee} from '../../utils/events'
import { NavBar, Icon } from 'antd-mobile';
export default class order extends Component {
    constructor(){
        super()
        this.state={
            list:[],
            tatol:0
        }
    }
    componentDidMount(){
        ee.on('message',  (text) =>{
            // console.log(text)
            this.setState({list:text})
          })
    }
    render() {

        return (
            <div>
                  <div>
                    <NavBar
                        mode="light"
                        icon={<Icon type="left" />}
                        onLeftClick={() => this.props.history.goBack()}
                        rightContent={[
                            <Icon key="0" type="search" style={{ marginRight: '16px' }} />,
                            <Icon key="1" type="ellipsis" />,
                        ]}
                    >确认订单</NavBar>
                </div>
                <div className="order-top w">
        <div className="address">
            <h3>
               <span>代用名</span> <span>188****8888</span> 
            </h3>
            <p>北京 北京市 昌平区 朱辛庄中公教育实训基地IT教学楼 2号楼 2202室</p>
        </div>

    </div>
    <div className="order-content">
        <div className="top">
            <div className="left"><i className="iconfont icon-gouwuche"></i>
            <h3>品牌精选</h3></div>
            <div className="right">
                <span>已免运费</span>
                <i></i>
                <a href="">领券</a>
            </div>
            
        </div>
        <ul>
            {
              this.state.list.length!=0?this.state.list.map(ele=>(
                       <li key={ele.id}>
                <div className="left"><img src={ele.img} alt="" /></div>
                <div className="right">
                    <p className="p1">{ele.goodsname}</p>
                    <div>
                       <p><span>&yen;{ele.price}</span> <span>x{ele.num}</span></p> 
                        <p>
                            <span>7天无理由退货</span>
                            <span>特价</span>
                        </p>
                    </div>
                </div>
                
            </li>
                )):''
            }
         
           

        </ul>
        <div className="row1"><span>发票类型</span><span>不开发票 &gt;</span></div>
        <div className="row1"><span>售后免邮</span><span className="grey">部分商家赠送</span></div>
        <div className="row1"><span>买家留言</span><span className="grey">填写内容需要与商家协商并确认，45字以内</span></div>
    </div>
    <div className="order-bottom">
        <div className="row2"><span>商品金额</span><span className="grey">&yen;1988</span></div>
        <div className="row2"><span>优惠活动</span><span className="on">- &yen;200</span></div>
        <div className="row2"><span>优惠券</span><span className="grey">暂无可用</span></div>
    </div>
    <div className="order-fix">
        <div className="fl">
            <p>合计</p>
        <span className="grey">以免运费</span>
    </div>
    <div className="fl">
        <p className="on">&yen;{this.state.tatol}</p>
        <span className="grey">已优惠&yen;200元</span>
    </div>
    <div className="fr">确认订单</div>
    </div>
            </div>
        )
    }
}
